import 'package:flutter/material.dart';
import 'package:side_navigation/side_navigation.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../provider/_providers.dart';
import 'contact/contact_page.dart';
import 'conversation/chat_page.dart';

class NavigatePage extends ConsumerWidget {

  NavigatePage({super.key});

  List<Widget> views =  [
    ChatPage(),
    ContactPage(),
    const Center(
      child: Text('Settings'),
    )
  ];

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Consumer(
      builder: (context, ref, child) {

       var navigateIndex = ref.watch(chatManagerProvider).navigateIndex;


        return Scaffold(
          body: Row(
            children: [
              /// Pretty similar to the BottomNavigationBar!
              SideNavigationBar(
                expandable: false,
                initiallyExpanded: false,
                selectedIndex: navigateIndex,
                items: const [
                  SideNavigationBarItem(
                    icon: Icons.chat,
                    label: '消息',
                  ),
                  SideNavigationBarItem(
                    icon: Icons.person,
                    label: '通讯录',
                  ),
                  SideNavigationBarItem(
                    icon: Icons.settings,
                    label: '设置',
                  ),
                ],
                onTap: (index) {
                 ref.read(chatManagerProvider).changeNavigate(index);
                },
              ),

              /// Make it take the rest of the available width
              Expanded(
                child: views.elementAt(navigateIndex),
              )
            ],
          ),
        );
      },
    );
  }
}
